<template>
  <ul>
    <li v-for="(item,index) in data">
      <div class="left">
        <p class="mobile" v-init-tooltips="{
        tableName: item.tableName,
        systemid: item.systemid,
        bsh: item.mobile,
        bshlx: '004'
        }">{{item.mobile}}</p>
        <p class="name">{{item.name}}</p>
      </div>
      <div class="right">
        <p class="time">{{item.time}}</p>
        <p class="count" v-if="item.type === 'phone'">共{{item.count}} 次</p>
        <p class="count" v-else>{{item.count}} 条</p>
      </div>
    </li>
    <li class="lookAll" v-if="isShowLoadAll" @click.stop="loadAll">查看全部<i class="iconfont icon-dextrad"></i></li>
  </ul>
</template>

<script>
  export default {
    name: 'record-list',
    components: {},
    mixins: [],
    computed: {},
    props: {
      data: {
        type: Array,
        default() {
          return []
        }
      },
      loadAll: {
        type: Function,
        default() {
          return () => {
          }
        }
      },
      isShowLoadAll: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    methods: {},
    watch: {},
    mounted() {
    },
    created() {
    }
  }
</script>


<style lang="scss" scoped>
  ul {
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff;
    li {
      margin: 0 .5rem .7rem 2.2rem;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ddd;
      padding-bottom: .7rem;
      p {
        margin: 0;
        line-height: 1.3;
      }
      .left {
        flex: 1;
        .mobile {
          color: #5078ac;
        }
        .name {
          color: #000;
        }
      }
      .right {
        .time {
          text-align: right;
        }
        .count {
          line-height: 1rem;
          padding: .05rem .5rem;
          color: #fff;
          background-color: #fe6601;
          text-align: center;
          border-radius: .4rem;
          float: right;
        }
      }
    }
    .lookAll {
      margin: 0;
      padding: 0;
      line-height: 1;
      text-align: center;
      font-size: 1rem;
      border: 0;
      justify-content: center;
    }
  }
</style>
